<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
    //就是http://127.0.0.1:8080/pic/
    String basePath = "http://106.53.67.228/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论插件</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap-3.3.4.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/btn.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/lq-score.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/demo.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/iconfont.css">

</head>
<style>
    .icon {

        width: 1em; height: 1em;

        vertical-align: -0.15em;

        fill: currentColor;

        overflow: hidden;

    }
    a:hover,a:link{
        text-decoration: none;
    }
    /*星星样式*/
    .content{ width:800px; margin:0 auto; padding-top:20px;}
    .title{ font-size:14px; background:#dfdfdf; padding:10px; margin-bottom:10px;}
    .block{ width:100%; margin:0 0 20px 0; padding-top:10px; padding-left:50px; line-height:21px;}
    .block .star_score{ float:left;}
    .block p,.block .attitude{ padding-left:20px; line-height:21px; display:inline-block;}
    .block p span{ color:#C00; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
    .star_score { background:url(${pageContext.request.contextPath}/static/images/stark2.png); width:160px; height:21px;  position:relative; }
    .star_score a{ height:21px; display:block; text-indent:-999em; position:absolute;left:0;}
    .star_score a:hover{ background:url(${pageContext.request.contextPath}/static/images/stars2.png);left:0;}
    .star_score a.clibg{ background:url(${pageContext.request.contextPath}/static/images/stars2.png);left:0;}
    /*星星样式*/
</style>
<body>

<div class="container">
	<div class="commentbox">
        <form id="form1" method="post" action="${pageContext.request.contextPath}/comAndScore/insertComment"></form>
        <input form="form1" type="hidden" name="novelId" value="${novel.id}"/>
        <input form="form1" type="hidden" name="novelname" value="${novel.novelname}"/>
        <textarea form="form1" cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" name="content" id="content" required="required" ></textarea>
		<input  type="button" class="btn btn-info pull-right" id="comment" value="评论" />
		
		<!--评分系统-->
        <hr />
        <!------------------------demo3-------------------------->
        <%--<div>
            <h4>为该作品打个分吧！</h4>
            <div class="myapp-score">
                <div id="demo3">
                </div>
                <div class="myapp-tip">
                    <span id="tip3" class="lq-score-tip"></span>
                </div>
            </div>
        </div>--%>
        <form id="form2" method="post" action="${pageContext.request.contextPath}/comAndScore/insertGrade"></form>
        <input form="form2"  type="hidden" id="gradescore"  name="score" value="${grade.score}"/>
        <div class="content">
            <p class="title">为该作品打个分吧!</p>
            <div id="startone"  class="block clearfix" >
                <div class="star_score"></div>
                <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
                <div class="attitude"></div>
            </div>
        </div>
        <hr />
	</div>
	
	
	<div class="comment-list">
        <c:forEach items="${commentList }" var="comment">
            <div class="comment-info">
                <header><img src="<%=basePath%>group1/M00/00/00/rBAABl1YEFyAADTzAAEpS0Cfpz4097.jpg"></header>
                <div class="comment-right">
                    <h3>${comment.username}</h3>
                    <div class="comment-content-header"><span><i class="glyphicon glyphicon-time"></i> ${comment.createtime}</span><span><i class="glyphicon glyphicon-map-marker"></i>深圳</span></div>
                    <p class="content">${comment.content} </p>
                    <div class="comment-content-footer">
                        <div class="row">
                            <div class="col-md-10">
                                <span><i class="glyphicon glyphicon-pushpin"></i> 来自:win10 </span><span><i class="glyphicon glyphicon-globe"></i> chrome 55.0.2883.87</span>
                            </div>
                            <div class="col-md-2" >
                                <span class="reply-btn" >

                                      <c:choose>
                                          <c:when test="${!empty ensureList }">
                                              <c:set var="flag"  value="0"></c:set>
                                              <c:forEach items="${ensureList }" var="ensure" varStatus="stat"  >
                                                  <%--<c:set var="exitId" value="1"></c:set>--%>
                                                  <c:if  test="${flag eq 0}">
                                                      <c:if  test="${ensure.commentId eq comment.id}">
                                                        <a href="${pageContext.request.contextPath}/comAndScore/insertEnsure?islike=0&commentId=${comment.id}" style="color:red;" class="iconfont icon-dianzan"   onclick="return islogin()">
                                                                ${comment.zcount}
                                                        </a>
                                                          <c:set var="flag" value="1"></c:set>
                                                      </c:if>
                                                      <c:if  test="${stat.last}">
                                                          <c:if  test="${flag eq 0}">
                                                            <a href="${pageContext.request.contextPath}/comAndScore/insertEnsure?islike=1&commentId=${comment.id}" style="color:red;" class="iconfont icon-dianzan1" onclick="return islogin()">
                                                                    ${comment.zcount}
                                                            </a>
                                                          </c:if>
                                                      </c:if>

                                                  </c:if>
                                              </c:forEach>
                                          </c:when>
                                          <c:otherwise>
                                              <a href="${pageContext.request.contextPath}/comAndScore/insertEnsure?islike=1&commentId=${comment.id}" style="color:red;" class="iconfont icon-dianzan1" onclick="return islogin()">
                                                      ${comment.zcount}
                                              </a>
                                          </c:otherwise>
                                      </c:choose>

                                </span>
                            </div><%--<svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dianzan"></use>
                    </svg>--%>
                        </div>
                    </div>
                    <div class="reply-list"></div>
                </div>
            </div>
        </c:forEach>
		
	</div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.comment.js" ></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script type= "text/javascript"src="${pageContext.request.contextPath}/static/js/lq-score.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/iconfont.js"></script>
<script type="text/javascript">
    //parent.location.reload();
	//评论登录
    $("#comment").click(function () {
        var user="<%=session.getAttribute("user")%>";
       if(user=="null"||user==""){
           alert("请先登录");
       }else if($(".mytextarea").val()==""){
          alert("评论不能为空！");
       }else{
           $("#form1").submit();
       }
    });
    //点赞登录
    function islogin(){
        var user="<%=session.getAttribute("user")%>";
        if(user=="null"||user==""){
            alert("请先登录");
            return false;
        }else{
            return true;
        }
    };
    //评分登陆
    var gradescore=$("#gradescore").val();
    if(gradescore==""){
        scoreFun($("#startone"));

    }else{
        var defaults = {
            fen_d: 16,
            ScoreGrade: 10,
            types: ["很不满意", "差得太离谱,非常不满", "不满意", "内容狗血，不满意", "一般", "剧情一般", "还凑活", "满意", "内容还是挺满意的", "非常满意", "这小说让我收获很多"],
            nameScore: "fenshu",
            parent: "star_score",
            attitude: "attitude"
        };
        options = $.extend({}, defaults);
        var object = $("#startone");
        var countScore = object.find("." + options.nameScore);/*分数*/
        var startParent = object.find("." + options.parent);/*星星的父元素，包含是个星星*/
        var atti = object.find("." + options.attitude);/*态度*/
        for (var i = 0; i < 10; i++) {
            var newSpan = $("<a href='javascript:void(0)'></a>");
            newSpan.css({"left": 0, "width": 16 * (i + 1), "z-index": 10 - i});
            newSpan.appendTo(startParent)
        }
        var preA = 1;
        var n = gradescore;
        var ww = 16 * n;
        var scor = preA * n;
        atu = options.types[parseInt(n-1)];
        object.find("a").removeClass("clibg");
        startParent.find("a").each(function (index, element){
           if(index==gradescore-1){
               $(this).addClass("clibg");
               $(this).css({"width": ww, "left": "0"});
           }
        });
        countScore.text(scor);
        atti.text(atu)

    }

    function scoreFun(object) {
        var defaults = {
            fen_d: 16,
            ScoreGrade: 10,
            types: ["很不满意", "差得太离谱,非常不满", "不满意", "内容狗血，不满意", "一般", "剧情一般", "还凑活", "满意", "内容还是挺满意的", "非常满意", "这小说让我收获很多"],
            nameScore: "fenshu",
            parent: "star_score",
            attitude: "attitude"
        };
        options = $.extend({}, defaults);
        var countScore = object.find("." + options.nameScore);/*分数*/
        var startParent = object.find("." + options.parent);/*星星的父元素，包含是个星星*/
        var atti = object.find("." + options.attitude);/*态度*/
        var now_cli;
        var atu;
        var fen_d = options.fen_d;//16
        var len = options.ScoreGrade;//10
        startParent.width(fen_d * len);
        var preA = 1;/*(5 / len);*/
        for (var i = 0; i < len; i++) {
            var newSpan = $("<a href='javascript:void(0)'></a>");
            newSpan.css({"left": 0, "width": fen_d * (i + 1), "z-index": len - i});
            newSpan.appendTo(startParent)
        }
        startParent.find("a").each(function (index, element) {
            $(this).click(function () {

                var user="<%=session.getAttribute("user")%>";
                if(user=="null"||user==""){
                    alert("请先登录");
                }else{
                    now_cli = index;
                    gradescore = index+1;
                    $("#gradescore").val(gradescore);
                    $("#form2").submit();
                    show(index, $(this))
                }
            });
            $(this).mouseenter(function () {
                show(index, $(this))
            });
            $(this).mouseleave(function () {
                if (now_cli >= 0) {
                    var scor = preA * (parseInt(now_cli) + 1);
                    startParent.find("a").removeClass("clibg");
                    startParent.find("a").eq(now_cli).addClass("clibg");
                    var ww = fen_d * (parseInt(now_cli) + 1);
                    startParent.find("a").eq(now_cli).css({"width": ww, "left": "0"});
                    if (countScore) {
                        countScore.text(scor)
                    }
                } else {
                    startParent.find("a").removeClass("clibg");
                    if (countScore) {
                        countScore.text("")
                    }
                    atti.text("");
                }
            })
        });

        function show(num, obj) {
            var n = parseInt(num) + 1;
            var lefta = num * fen_d;
            var ww = fen_d * n;
            var scor = preA * n;
            atu = options.types[parseInt(num)];
            object.find("a").removeClass("clibg");
            obj.addClass("clibg");
            obj.css({"width": ww, "left": "0"});
            countScore.text(scor);
            atti.text(atu)
        }
    };







    var mark=0;
	$(function() {
       /* $(".comment-list").addCommentList({data: arr, add: ""});
        $("#comment").click(function () {
            var obj = new Object();
            obj.img = "./images/img.jpg";
            obj.replyName = "匿名";
            obj.content = $("#content").val();
            obj.browse = "天津";
            obj.osname = "win10";
            obj.replyBody = "";
            $(".comment-list").addCommentList({data: [], add: obj});

        });*/
        //demo3
        $("#demo3").lqScore({
            $tipEle: $("#tip3"), //提示必须要指定显示的元素，显示样式由你自己定义，如果你不擅长css，可以使用demo中的样式
            tips: ["不推荐", "一般", "不错", "很棒", "极力推荐！"],
            zeroTip: "未评分"
        });
    });
</script>

</body>
</html>